<script setup>

import {ref} from "vue";
import {getBindPidAPI, getNavUserAPI, getUserInfoAPI, updateConfigAPI} from "../services/me";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {useUserInfoStore} from "../stores/modules/userInfo";
import {useCommonInfoStore} from "../stores/modules/commonInfo";
import {BaseImgUrl, BaseURL} from "../utils/lshttp";
import {conUtils} from "../utils/conUtils";
import {toMiniAppRedPage} from "../utils/utils";
import Banner from "../pages/me/components/banner.vue";
import {getBannerListAPI} from "../services";
import value from "uview-plus/components/u-text/value";

const userInfoStore = useUserInfoStore()
const commonInfoStore = useCommonInfoStore()
const user = ref()
const navMenu = ref([])
const platform = uni.getSystemInfoSync().platform;
const banners = ref([])
onLoad(() => {
  getNavUser()
})

onShow(async () => {
  // #ifdef APP-PLUS
  if (platform === 'ios') {
    plus.runtime.getProperty(plus.runtime.appid, async (appInfo) => {
      const {result} = await updateConfigAPI()
      userInfoStore.setIsOpenWXLogin(result.ios_version_config.audit !== parseInt(appInfo.versionCode))
    })
  } else if (platform === 'android') {
    userInfoStore.setIsOpenWXLogin(true)
  }
  // #endif
  // #ifdef MP || H5
  userInfoStore.setIsOpenWXLogin(true)
  // #endif
  console.log("userInfoStore", userInfoStore.isOpenWXLogin)
  if (userInfoStore.isLogin()) {
    await getUserInfo()
  } else {
    user.value = undefined
    return
  }
  if (!userInfoStore.userInfo.username) {
    uni.showModal({
      title: '绑定手机号-提示',
      content: '您还未绑定手机号，手机号用于抢单、订单核验，和订单状态通知，是否去绑定？',
      confirmText: '去绑定',
      success: async function (res) {
        if (res.confirm) {
          await uni.navigateTo({
            url: "/pagesme/settinginfo"
          })
        }
      }
    })
  }
  // const res = await afbPayAPI()
  // conUtils("afbPayAPI",res)
})
const toIndex = () => {
  if (userInfoStore.isLogin()) {
    if (user.value?.is_member === 0 || !user.value?.id) {
      if (user.value?.level?.level === 5) {
        uni.switchTab({url: '/pages/index/index'})
      } else {
        uni.navigateTo({url: '/pagesme/vip/vip'})
      }
      return
    }
    uni.switchTab({url: '/pages/index/index'})
  }
}
const getUserInfo = async () => {
  const res = await getUserInfoAPI()
  user.value = res.result
  userInfoStore.setUserInfo(user.value)
  // 设置分销商
  // if (commonInfoStore.resellerId && !user.value.reseller_id) {
  //   await getBindResellerIdAPI(commonInfoStore.resellerId)
  // }
  // 设置推荐人
  if (commonInfoStore.parentId && !user.value.parent_id) {
    conUtils("commonInfoStore.parentId", commonInfoStore.parentId)
    conUtils("commonInfoStore.parent_id", !user.value.parent_id)
    await getBindPidAPI(commonInfoStore.parentId)
  }
  // 小程序整改注释
  // if (!user.value.username) {
  //   await uni.navigateTo({
  //     url: "/pages/me/settinginfo"
  //   })
  // }
}
const getNavUser = async () => {
  const res = await getNavUserAPI()
  navMenu.value = res.result[0].menu
  conUtils("getNavUser", navMenu.value[0])
  const resBanner = await getBannerListAPI({banner_type: 3})
  conUtils("getBannerListAPI", resBanner.result)
  banners.value = resBanner.result
}

const pageUrl = (url, isTab) => {
  // uni.navigateTo({
  //   url: "/pages/index/toweburl?url=https://lsz.lszbg.com/#/pages/setting/setting"
  // })
  if (userInfoStore.isLogin()) {
    if (isTab) {
      uni.switchTab({url})
      return
    }
    uni.navigateTo({url})
  }
}

const user_login = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
}
const handleUpdateAvatar = () => {
  console.log("userInfoStore.isLogin()", userInfoStore.isLogin())
  if (userInfoStore.isLogin()) {
    uni.navigateTo({
      url: '/pages/setting/setting'
    })
  }
}
// 绑定手机号
const handleBindPhone = () => {
  if (userInfoStore.isLogin()) {
    // uni.navigateTo({
    //   url: '/pages/login/updatephoneandpass'
    // })
    uni.navigateTo({
      url: "/pagesme/settinginfo"
    })
    // uni.showModal({
    //   title: '绑定手机号-提示',
    //   content: '您未绑定手机号，请先绑定手机号，手机号用于的订单状态通知，以及订单将要过期时及时提醒您处理等，现在去绑定?',
    //   confirmText: '去绑定',
    //   success: async function (res) {
    //     if (res.confirm) {
    //
    //     }
    //   }
    // })
  }
}
const vipIcon = [BaseImgUrl + "/vip/my_vn.png", BaseImgUrl + "/vip/my_vn1.png", BaseImgUrl + "/vip/my_vn2.png", BaseImgUrl + "/vip/my_vn3.png", BaseImgUrl + "/vip/my_vn4.png", BaseImgUrl + "/vip/my_vn5.png"]
const toBusinessOrder = () => {
  uni.navigateTo({url: '/pages/business_order/order_list?shopId=MTQ0MjIx'})
}
const toFeedback = () => {
  uni.navigateTo({url: 'pagesme/feedback/feedback'})
}
const toRaffle = () => {
  uni.navigateTo({url: '/pages_raffle/index_raffle'})
}
const noFunction = () => {
  // uni.showToast({title:'该功能正在开发中',icon:'none'})
  uni.navigateTo({url: '/pagesme/red_bag'})
}
const pageNavUrl = (e) => {
  if (!userInfoStore.isLogin()) {
    return
  }
  let item = e.currentTarget.dataset.url
  conUtils("item.name", item.name)
  conUtils("item.type", item.type)
  conUtils("item.appid", item.appid)
  conUtils("item.path", item.path)
  if (item.type === 1) {
    // 跳转内置页面
    if (item.name === "商家入驻") {
      uni.navigateTo({
        url: "/pagesme/businessinto/businessinto"
      })
    } else if (item.name === "新手指南") {
      uni.navigateTo({
        url: "/pages/index/novice"
      })
    } else if (item.name === "商务合作") {
      uni.navigateTo({
        url: "/pagesme/businessinto/callus"
      })
    } else if (item.name === "建议反馈") {
      uni.navigateTo({
        url: "/pagesme/feedback/addfeedback"
      })
    } else {
      uni.navigateTo({
        url: item.path
      })
    }
  }
  if (item.type === 2) {
    // 跳转内置底部菜单
    uni.switchTab({
      url: item.path
    })
  }
  if (item.type === 3) {
    uni.navigateTo({
      url: '/pages/Webview/Webview?url=' + encodeURIComponent(JSON.stringify(item.path))
    })
  }
  if (item.type === 4) {
    toMiniAppRedPage(item)
  }
}
</script>

<template>
  <!-- 个人中心 -->
  <view style="position: relative">
    <!--头像啊-->
    <view class="user_top_content">
      <image style="width: 750rpx;height: 490rpx;position: absolute;z-index: 68"
             :src="BaseImgUrl + '/once/top_bg1.png'"></image>
      <view class="header_top">
        <!--        <u-status-bar></u-status-bar>-->
        <view style="display:flex;flex-direction: column;justify-content: space-between">
          <!-- #ifdef APP-PLUS || MP-->
          <u-navbar
              placeholder
              titleStyle="color:black"
              leftIconColor="#000"
              :customStyle="{backgroundColor: 'transparent'}"
              auto-back></u-navbar>
          <view
              style="color: white;z-index: 999;height: 88rpx;width: 100%;text-align: center;line-height: 88rpx;font-weight: bold;font-size: 36rpx;margin-top: -80rpx">
            个人中心
          </view>
          <!-- #endif -->
          <!-- #ifdef H5-->
          <view style="margin-top: 158rpx"></view>
          <!-- #endif -->
          <view class="icon_content" style="display:flex;z-index: 100;height: 100%">
            <view class="my_info_box" style="flex: 1;z-index: 99;" v-if="!user?.id">
              <view class="header_img">
                <image :src="BaseImgUrl + '/images/logo_login.png'" @click="user_login()"></image>
              </view>
              <view class="username_box">
                <view class="username" @click="user_login()">
                  点击登录
                </view>
              </view>
            </view>
            <view class="my_info_box" style="flex: 1;z-index: 99;" v-else>
              <view class="header_img" @tap="handleUpdateAvatar" style="position: relative">
                <image :src="user.avatar"></image>
                <image :src="!user?.level?.level?vipIcon[0]:vipIcon[user?.level?.level]"
                       style="width: 40rpx;height: 40rpx;border: none;position: absolute;bottom: 0;right: 0"></image>
              </view>
              <view class="username_box" style="z-index: 99;">
                <view class="username">
                  <view class="nickname" @tap="handleUpdateAvatar">{{
                      user.nickname ? user.nickname : '领食用户'
                    }}
                  </view>
                </view>
                <view class="phone" v-if="user.username" @tap="handleUpdateAvatar">
                  手机号：{{ user.username.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}
                </view>
                <view class="phone" v-if="!user.username" @click="handleBindPhone">点击绑定手机号</view>
              </view>
            </view>
            <view class="Set_box">
              <up-button
                  type="primary"
                  color="#ffffff00"
                  shape="circle"
                  @tap="pageUrl('/pages/setting/setting',false)"
                  :customStyle="{padding: '16rpx 0',marginRight: '0'}">
                <image style="width: 50rpx;height: 50rpx;margin: 0 10rpx"
                       :src="BaseImgUrl + '/once/setting.png'"></image>
              </up-button>
              <up-button
                  @click="commonInfoStore.toKeFu()"
                  type="primary"
                  color="#ffffff00"
                  shape="circle"
                  :customStyle="{padding: '16rpx 0',marginRight: 0}">
                <image style="width: 50rpx;height: 50rpx;margin: 0 10rpx" :src="BaseImgUrl + '/once/kefu.png'"></image>
              </up-button>
            </view>
          </view>
        </view>
      </view>
      <view class="user_top">
        <image class="user_top_bg" :src="BaseImgUrl + '/once/top_bg2.png'"></image>
        <!--          @tap="pageUrl('/pagesme/vip/vip',false)"-->
        <view class="user_top_money_content" @tap="pageUrl('/pagesme/vip/vip',false)">
          <image class="user_top_money_bg" style="z-index: 100" :src="BaseImgUrl + '/once/user_vip.png'"
                 v-if="user?.is_member === 0"></image>
          <view style="width: 30rpx"></view>
          <view class="user_top_money_text" style="z-index: 100">
            <view style="font-weight: bold;z-index: 130">
              <view style="font-size: 24rpx;color: #888888;margin-top: 10rpx" v-if="user?.is_member === 1">
                当前等级V{{ user?.level?.level || 1 }}
                <text v-if="user?.level?.level!==5">，距离 V{{ (user?.level?.level || 1) + 1 }} 还需要</text>
                <text v-if="user?.level?.level!==5" style="font-size: 32rpx;color: #fa7649;">
                  {{ (user?.level?.order_task || 0) - (user?.level?.nums || 0) }}
                </text>
                <text v-if="user?.level?.level!==5">笔订单</text>
                <text v-if="user?.level?.level===5">，已经是最高等级</text>
              </view>
              {{ user?.is_member === 0 || !user?.id ? "尚未开通会员" : "" }}
              <view v-if="user?.id" class="vip_con">
              </view>
            </view>
            <view class="" style="flex: 1;margin-top: 20rpx;display: flex;align-items: center"
                  v-if="user?.is_member === 1">
              <view style="margin-left: 10rpx;color: #fa7649;font-weight: bold;font-size: 28rpx">V{{
                  user?.level?.level !== 5 ? user?.level?.level || 0 : 4
                }}
              </view>
              <view style="flex: 1;width: 260rpx;margin: 0 10rpx">
                <progress
                    :percent="((user?.level?.nums/user?.level?.order_task)*100) === 0 ?  user?.level?.level!==5 ? 5:100 : (user?.level?.nums/user?.level?.order_task)*100"
                    border-radius="100"
                    duration="6"
                    stroke-width="8"
                    activeColor="#fa7649"
                    backgroundColor="#FFF5FE"
                    active="true"/>
              </view>
              <view style="margin-left: 10rpx;color: #fa7649;font-weight: bold;font-size: 28rpx">V{{
                  user?.level?.level !== 5 ? (user?.level?.level || 1) + 1 : 5
                }}
              </view>
            </view>
            <view style="font-weight: bold;font-size: 26rpx;color: #888888;margin-top: 10rpx">
              {{ user?.is_member === 0 || !user?.id ? "开通会员，享受更多福利特权" : "" }}
            </view>
          </view>
          <view style="flex: 1"></view>
          <view class="open_vip" style="z-index: 100" @click.stop="toIndex">
            {{ user?.is_member === 0 || !user?.id ? "开通会员" : user?.level?.level === 5 ? "去下单" : "去升级" }}
          </view>
        </view>
        <view style="height: 30rpx"></view>
      </view>
    </view>
    <view class="middle_content">
      <view
          style="width: 670rpx;height: 100rpx;margin-bottom: 20rpx;position: relative;background-color: white;border-radius: 10rpx;padding: 0 26rpx">
        <!--        <image style="width: 100%;height: 100%;position: absolute;z-index: 0"-->
        <!--               :src="BaseImgUrl + '/once/kqbg.png'"></image>-->
        <view style="display: flex;z-index: 1;align-items: center;height: 100%" v-if="userInfoStore.isOpenWXLogin">
          <up-col span="6" justify="center" text-align="center" customStyle="z-index: 1"
                  @click="pageUrl('/pages/moneydetail/moneydetail',false)">
            <view style="display: flex;align-items: center">
              <image style="width: 68rpx;height: 68rpx" :src="BaseImgUrl + '/once/money.png'"></image>
              <text style="color: black;font-size: 26rpx;margin-left: 20rpx">我的钱包</text>
              <!--              <view style="flex: 1"></view>-->
              <image style="width: 22rpx;height: 22rpx;margin-left: 10rpx"
                     :src="BaseImgUrl + '/once/right.png'"></image>
            </view>
          </up-col>
          <up-col span="6" justify="center" text-align="center" customStyle="z-index: 1"
                  @click="pageUrl('/pagesme/red_bag',false)">
            <image style="width: 68rpx;height: 68rpx" :src="BaseImgUrl + '/once/kaquan.png'"></image>
            <text style="color: black;font-size: 26rpx;margin-left: 20rpx">红包卡券</text>
            <image style="width: 22rpx;height: 22rpx;margin-left: 10rpx" :src="BaseImgUrl + '/once/right.png'"></image>
          </up-col>
        </view>
      </view>
      <view class="middle_price" v-if="userInfoStore.isOpenWXLogin">
        <view class="small_box" @tap="pageUrl('/pages/makemoney/makemoney',true)">
          <view class="price">{{ user?.income_money || '0.00' }}</view>
          <view class="text">推广收益</view>
        </view>
        <view class="small_box" @tap="pageUrl('/pages/moneydetail/moneydetail?type=3',false)">
          <view class="price">{{ user?.all_money || '0.00' }}</view>
          <view class="text">累计节省</view>
        </view>
        <view class="small_box" @tap="pageUrl('/pages/cashout/cashout',false)">
          <view class="price">{{ user ? user['money'] : '0.00' }}</view>
          <view class="text">可提余额</view>
        </view>
      </view>
      <!-- 会员 -->
      <!--      <view class="vipOverall">-->
      <!--        &lt;!&ndash;        <view class="vip_left" @tap="pageUrl('/pages/member/member',false)" v-if="userInfoStore.isOpenWXLogin">&ndash;&gt;-->
      <!--        &lt;!&ndash;          <image :src="BaseImgUrl + '/images/yuan1.png'"></image>&ndash;&gt;-->
      <!--        &lt;!&ndash;          <view class="vipBottom">&ndash;&gt;-->
      <!--        &lt;!&ndash;            <view class="foodie">领食超级会员</view>&ndash;&gt;-->
      <!--        &lt;!&ndash;            <view class="see">&ndash;&gt;-->
      <!--        &lt;!&ndash;              <text>立即查看</text>&ndash;&gt;-->
      <!--        &lt;!&ndash;              <image :src="BaseImgUrl + '/images/arrow_right1.png'"></image>&ndash;&gt;-->
      <!--        &lt;!&ndash;            </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;          </view>&ndash;&gt;-->
      <!--        &lt;!&ndash;        </view>&ndash;&gt;-->
      <!--        <view class="vip_right" @tap="pageUrl('/pagesme/foodie',false)">-->
      <!--          <image :src="BaseImgUrl + '/images/yuan.png'"></image>-->
      <!--          <view class="vipBottom" style="display: flex;align-items: center">-->
      <!--            <view>-->
      <!--              <view class="foodie pink">领食吃货榜单</view>-->
      <!--              <view class="see">-->
      <!--                <text class="pink">立即查看</text>-->
      <!--              </view>-->
      <!--            </view>-->
      <!--            <view style="flex: 1;"></view>-->
      <!--            <view>-->
      <!--              <image style="width: 22rpx;height: 22rpx;margin-right: 20rpx;margin-top: 20rpx"-->
      <!--                     :src="BaseImgUrl + '/once/right.png'"></image>-->
      <!--            </view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--      </view>-->
      <!-- 我的推广 -->
      <view class="middle_banner" v-if="banners.length>0">
        <banner :banners="banners"></banner>
      </view>

      <view class="bottom_list" v-if="navMenu.length>0 && userInfoStore.isOpenWXLogin">
        <view class="title">更多服务</view>
        <view style="display: flex;flex-wrap: wrap">
          <up-col span="3" justify="center" text-align="center" customStyle="margin-bottom: 30rpx"
                  v-for="(item, index) in navMenu" :key="index">
            <view @tap="pageNavUrl" :data-url="item">
              <image :src="item.image" style="width: 76rpx;height: 76rpx;margin: auto"></image>
              <view class="text" style="margin-top: 16rpx;font-size: 26rpx">{{ item.name }}</view>
            </view>
          </up-col>
        </view>
      </view>

      <!--#ifdef H5 || MP-->
      <!--      <view @click="toBusinessOrder" v-if="BaseURL === 'https://test.lszbg.cn'">-->
      <!--        商家账单管理-->
      <!--      </view>-->
      <!--      <view @click="toRaffle" v-if="BaseURL === 'https://test.lszbg.cn'">-->
      <!--        抽奖-->
      <!--      </view>-->
      <!--#endif-->
      <view class="message">
        <view>Copyright @ 2021-2023</view>
        <view>四川业淳网络科技有限公司</view>
      </view>
    </view>
  </view>
</template>
<style>
page {
  background-color: #F6F6F6;
}
</style>
<style lang="scss" scoped>
.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FDE52F, #FDE52F);
}

.my_info_box {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.Bindingwxapp {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx;
  width: 90%;
  margin: 30rpx auto 0;

  image {
    width: 50rpx;
    height: 50rpx;
    margin-right: 10rpx;
    position: relative;
    top: 2px;
  }

  .lijibding {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: #999999;
  }
}

.viplingqu {
  text-align: center;
  padding: 60rpx 0;

  image {
    width: 300rpx;
  }

  .gongxi {
    font-weight: bold;
    font-size: 40rpx;
    color: #4F2600;
  }

  .youxiaioqi {
    font-size: 32rpx;
    color: #4F2600;
    margin: 20rpx 0 40rpx 0;
  }

  .lookbtn {
    color: #4F2600;
    border-radius: 200rpx;
    padding: 20rpx 10rpx;
    text-align: center;
    width: 60%;
    margin: 0 auto;
    font-size: 32rpx;
    background: linear-gradient(to right, #FEE2C6, #FEE2C6, #F0BA8A);
  }
}

.WxBd-box {
  padding: 60rpx 30rpx 30rpx 30rpx;
  text-align: center;

  image {
    width: 450rpx;
  }

  .wxbd-text {
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 100rpx;
    margin-top: 50rpx;

    view:nth-child(1) {
      margin-bottom: 10rpx;
    }
  }

  .WxBdBtn {
    width: 90%;
    margin: 0 auto;
    background: linear-gradient(to right, #FC754A, #FEBC5B);
    color: #FFFFFF;
    text-align: center;
    border-radius: 200rpx;
    padding: 20rpx 0;
  }
}

/* #ifdef MP-WEIXIN */
.qiangdanbutton1 > button {
  color: #333 !important;
  height: 19px !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 0 !important;
  background-color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: left !important;
}

/* #endif */

/* #ifdef H5 || APP-PLUS */
.qiangdanbutton1 {
  color: #333 !important;
  height: 19px;
  padding: 0;
  text-align: left;
  line-height: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: left;
}

/* #endif */

.message {
  color: #ccc;
  font-size: 20rpx;
  text-align: center;
  margin-top: 50rpx;
}

.base_top_box {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: linear-gradient(to right, #FC754A, #FEBC5B);
  z-index: 9999;
}

.header_top {
  //width: 100%;
  //background-size: 100% 100%;
  //position: relative;
  /* #ifdef H5 */
  //margin-top: 90rpx;
  /* #endif */
}

.icon_content {
  /* #ifdef MP */
  margin-top: -20rpx
  /* #endif */
}

.Set_box {
  display: flex;
  align-items: center;
  color: #333;
  margin-right: 30rpx;
  margin-top: -20rpx;

  view {
    margin: 0 0 0 20rpx;
  }
}

.user_login_box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
}

.header_top .header_img image {
  width: 112rpx;
  height: 112rpx;
  border-radius: 200rpx;
  border: 6rpx solid #FFFFFF;
  vertical-align: bottom;
}

.header_top .username_box {
  font-size: 32rpx;
  color: #fff;
  margin-left: 19rpx;
}

.header_top .username_box .phone {
  font-size: 28rpx;
  margin-top: 5rpx;
  color: #FFFFFF;
}

.username {
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #333;
}

.middle_content {
  width: 100%;
  box-sizing: border-box;
  padding: 30rpx 40rpx 40rpx 40rpx;
  border-top-left-radius: 60rpx;
  border-top-right-radius: 60rpx;
  //position: relative;
  //bottom: 60rpx;
}

.my_text {
  flex: 1;
  font-size: 28rpx;
}

.my_text, .right_text {
  color: #fae4ac;
}

.imgs {
  padding: 0 20px;
  height: 80rpx;
  margin: 0 auto;
  position: absolute;
  overflow: hidden;

  bottom: 0;

  left: 0;
  right: 0;
}

.imgs image {
  width: 100%;
  height: 100%;
}

.imgs .left_content {
  position: absolute;
  top: 20rpx;
  left: 60rpx;
  display: flex;
  font-size: 28rpx;
  color: #8A4701;
}

.icon_m image {
  width: 36rpx;
  height: 36rpx;
  margin-right: 18rpx;
}

.imgs .left_content .icon_m {
  width: 36rpx;
  height: 36rpx;
  margin-right: 15rpx;
  position: relative;
  top: 4rpx;
}

.imgs .right_content {
  position: absolute;
  left: 60rpx;
  top: 24rpx;
  font-size: 24rpx;
  color: #fae4ac;
  width: 638rpx;
  display: flex;
  align-items: center;
}

.imgs .right_content .right_arrow {
  margin-left: 6rpx;
  margin-top: 3rpx;
}

.middle_content .middle_price {
  width: 100%;
  box-sizing: border-box;
  padding: 36rpx 66rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx 5rpx #f8f8f8;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.middle_content .middle_price .small_box {
  position: relative;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.middle_content .middle_price .small_box:nth-child(1)::before,
.middle_content .middle_price .small_box:nth-child(2)::before {
  content: '';
  position: absolute;
  right: -63rpx;
  top: 21rpx;
  width: 2rpx;
  height: 62rpx;
  background-color: #EBECF0;
}

.middle_content .middle_price .small_box .price {
  font-size: 36rpx;
  color: #F97632;
  font-weight: bold;
  margin-bottom: 10rpx;
}

/* 会员 */
.vipOverall {
  width: 100%;
  height: 118rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vipOverall > view {
  flex: 1;
  height: 118rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
}

.vipOverall > view:nth-child(2) {
  //background-color: #F7E9EB;
}

.vipOverall .vip_left {
  //float: left;
  margin-right: 20rpx;
}

.vipOverall .vip_right {
  //float: right;
}

.vipOverall > view > image {
  width: 75rpx;
  height: 75rpx;
  margin: 22rpx 16rpx;
  float: left;
}

.vipBottom .foodie {
  padding-top: 24rpx;
  font-weight: bold;
  font-size: 28rpx;
  color: #111111;
}

.vipBottom .see {
  line-height: 33rpx;
}

.vipBottom .foodie.pink {
  color: #111111;
}

.vipBottom .see text.pink {
  color: #74757A;
}

.vipBottom .see text {
  padding-right: 9rpx;
  font-size: 26rpx;
  color: #74757A;
}

.vipBottom .see image {
  width: 22rpx;
  height: 17rpx;
}

.vipOverall .vipBottom {
  display: inline-block;
}

.middle_content .middle_banner {
  width: 100%;
  height: 194rpx;
  margin-top: 20rpx;
  position: relative;
}

.middle_content .middle_banner image {
  width: 100%;
}

.middle_content .middle_banner .go_btn {
  position: absolute;
  top: 57rpx;
  right: 30rpx;
  width: 104rpx;
  height: 104rpx;
  -webkit-animation-name: scaleDraw;
  /*关键帧名称*/
  -webkit-animation-timing-function: ease-in-out;
  /*动画的速度曲线*/
  -webkit-animation-iteration-count: infinite;
  /*动画播放的次数*/
  -webkit-animation-duration: 4s;
  /*动画所花费的时间*/
}

@keyframes scaleDraw {

  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1);
    /*开始为原始大小*/
  }

  25% {
    transform: scale(1.2);
    /*放大1.1倍*/
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.2);
  }
}

.bottom_list {
  width: 670rpx;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 24rpx 32rpx 8rpx 32rpx;
  background-color: #fff;
  //box-shadow: 0 2rpx 10rpx 5rpx #f0f0f0;
  margin: 40rpx auto 0;
}

.bottom_list .title {
  font-size: 32rpx;
  color: #111;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.bottom_list .list_box {
  box-sizing: border-box;
  padding-left: 56rpx;
}

.bottom_list .small_block {
  width: 100%;
  box-sizing: border-box;
  padding: 22rpx 0;
  font-size: 28rpx;
  color: #111;
  border-bottom: 2rpx solid #f7f7f7;
  position: relative;
  display: flex;
  align-items: center;

}

.right-jiao {
  margin-left: auto;
}

.bottom_list .small_block .icon {
  width: 38rpx;
  height: 38rpx;
  position: absolute;
  left: -53rpx;
  top: 18rpx;
}

.bottom_list .small_block .icon image {
  width: 100%;
  height: 100%;
}

.bottom_list .small_block button {
  //width: 100%;
  //height: 100%;
  //position: absolute;
  ///left: 0rpx;
  //top: 0rpx;
}

.username image {
  width: 38rpx;
  height: 38rpx;
  margin-right: 6rpx;
}

.username .vip_con {
  text-align: center;
  background: rgba(0, 0, 0, 0.16);
  border-radius: 100px;
  padding: 3px 8px;
  font-size: 12px;
  margin-left: 6px;
  display: flex;
  flex: 1;
  align-items: center;
}

.nickname {
  max-width: 338rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #FFFFFF;
}


.user_top_content {
  position: relative;
  width: 750rpx;
  height: 490rpx;
  /* #ifdef H5 */
  margin-top: -120rpx;
  /* #endif */

  .user_top {
    position: absolute;
    z-index: 100;
    width: 690rpx;
    height: 180rpx;
    bottom: 0;
    right: 30rpx;
    padding-top: 20rpx
  }

  .user_top_bg {
    position: absolute;
    z-index: 100;
    width: 690rpx;
    height: 180rpx;
    bottom: 0;
  }

  .user_top_money_content {
    z-index: 100;
    display: flex;
    align-items: center;

    .user_top_money_bg {
      width: 80rpx;
      z-index: 99;
      height: 80rpx;
      margin: 20rpx
    }
  }

  .user_top_money_text {
    z-index: 99;
    margin-top: 10rpx;
    font-size: 32rpx;
  }

  .open_vip {
    color: white;
    text-align: center;
    z-index: 99;
    padding: 10rpx 10rpx;
    font-size: 28rpx;
    margin-right: 30rpx;
    height: 60rpx;
    width: 160rpx;
    background: linear-gradient(81deg, #FD794B 0%, #FE9E54 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.8);
  }
}
</style>
